vue与webpack
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。1、首先我们在构建vue项目后，就得先了解vue的项目结构├── build ----------------...
2024-01-10
webpack vue 配置
vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.json 工程文件 |-webpack.config.js webpack 配置文件 2.)基于webpack模块化开发ES6 关...
2024-01-10
webpack vue 的一些笔记
1、开发过程中使用异步组件（提高性能）当app.js（几m）太大的时候才需要异步组件 第一种： 在route.js文件中 routes:[{ path:'/nav', name:'Nav', component:()=> import('xxx/xxx/Nav')}] 第二种 xxx.vue文件中注册组件的时候异步 components:{ ...
2024-01-10
vue中webpack的配置
vue中webpack的配置npm init -y(生成package.json文件)实时打包：npm i webpack-dev-server创建webpack.config.js文件配置webpack.config.js文件在package.json中添加一个脚本自动将打包好的bundle.js追加到页面处理第三方文件Babel(将es6中高级的语法转换为低级语法)webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 ...
2024-01-10
vue+webpack构建项目
1、vue+webpack环境搭建步骤1.1、去官网安装node.js。下载安装包之后直接点击安装即可。测试安装成功的界面如下：1.2、利用npm安装webpack 命令行语句为 npm install webpack -g 。测试安装成功的界面如下：1.3、安装淘宝镜像1.4、接下来就是全局安装vue-cli。需要注意的是使用npm安装vue-cli的时候时间很久，...
2024-01-10
webpack处理vue中render函数内容时报错
打包组件的时候报错，提示需要别的loader来处理render函数中的内容。但是我不是很理解，我已经用了vue-loader了。。。求大神指点。。。报错内容：ERROR in ./components/lib/tag/src/tag.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./c...
2024-03-14
在webpack react项目中使用scss
create-react-app版本：1.5.21、首先安装sass-loader node-sassnpm install sass-loader node-sass —save-dev2、运行npm run eject这时候会生成配置文件3、找到config文件里的webpack.config.dev.jswebpack.config.prod.js里的css配置也要修改，修改内容同webpack.config.dev.js找到module里的css配置部分，修改正则匹配为：/\.(css|scss)$...
2024-01-10
webpack 与 vue 打包体积优化
在使用vue开发时，遇到打包后单个文件太大，因而需要分包，不然加载时间太久。虽然尽可能减少请求次数，但是单个包太大也不是好事思路组件按需加载vue-router 的懒加载第三方包分离代码分割时，组件按需加载现在ui库大多都是以组件的形式进行处理，因而不用将整个库都导入，只需导入...
2024-01-10
webpack+react+redux+es6开发模式
一、预备知识 node, npm, react, redux, es6, webpack二、学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程 redux middleware 详解 Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍三、工程搭建 之前有写过 1.可以npm init, 创建一个新的工程。创建packa...
2024-01-10
vue项目，webpack中配置src路径别名及使用
1、项目结构：2、在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。3、在js文件或者vue文件的script标签中使用：（1）、js文件中导入示例：（2）、vue文件中导入示例：4、css（scss）文件在scss或者vue的style标签中导入示例：（1）、在scss文件中导入示例：（2）、在vue的style标签中导入示例：...
2024-01-10
使用dvajs+webpack构建react开发环境
之前我有写过博文介绍过dva.js及其用法，dva.js固然是个非常优秀的框架，但是如果用dev-cli来创建的话就会默认绑定使用roadhog而不是webpack。鉴于roadhog的文档要明显少于webpack，如果能使用webpack+dvajs的话使用起来应该会轻松些。本文大致来介绍下dvajs+webpack3.11.0 开发环境的搭建过程。首先先贴上package.json...
2024-01-10
vue+webpack实现异步组件加载
8.9更新：之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来，所以跑去博客园了，今天发现csdn已经帮我把文章搬过来，有必要修正一下这篇文章。写这篇文章的时候因为刚接触vue，所以捣鼓的时候有些迷糊。...
2024-01-10
react+webpack开发环境配置
react是目前非常热门的前端框架，提倡组件化开发。所谓的组件，简单理解，就是一个独立的页面部件（包括页面模版，样式，逻辑等），它是一个独立的整体。 webpack，是一个模块打包工具，其主要功能，就是将浏览器端无法识别的代码，通过各种loader和plugin，生成浏览器可用的代码。比如...
2024-01-10
【Vue】webpack引入iview运行出错
使用webpack新建Vue项目，Vue正常引入可以运行，但是当我引入iview并试图打包的时候，报了一大堆错误。。看了一下，都是css出错了：webpack配置如下：/*公共配置文件*/const path = require('path')const webpack = require('webpack')const HtmlWebpackPlugin = require('html-webpack-plugin')const VueLoaderPlugin = require('vue-loader/...
2024-01-10
vue 项目配置webpack代理服务，不生效
我用的是vue2.5,webpack版本是3.6，我如下配置了dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // Various Dev Server settings host: '192.168.31.91', // can be overwritten by ...
2024-02-18
react暴露其webpack配置，使less文件生效
在react使用中，纯原生状态下要去使用less文件比较麻烦，一般只支持.css文件；ps: 注意在修改前， 要先安装好less-loader，不然会报错的（1）、使用 yarn eject 可以暴露其webpack的配置，让.less文件生效修改样式；使用yarn eject后，可能会报这个错误：那是因为没有初始化本地项目，git init git add . ...
2024-01-10
【Vue】vue-cli webpack css中的图片路径问题
我使用vue-cli中的webpak模板，在.vue文件中我在css中引用图片template中引用一张style的css中引用一张目录结构如图app.vuehello.vue当我npm run build后 多了个dist,如果我进入dist目录anywhere启动服务器 那么地址是 http://192.168.10.13:8000/#/ 此时 两张图片正常css:.hello[data-v-2e7268e9] {width: 200px;height: 200px;background: ur...
2024-01-10
vue+webpack+vue-router+vuex+ssr全解析笔记
前端开发一起交流QQ群：7400342881、vue基础知识： 1.1 实例化vue：方法1：new Vue({ el: '#app', //html中被替换的的标签，即挂载到html中#app标签里面 components: { App }, template: '<App/>'})方法2：const root=new Vue({ components: { App }, template: '<App/>', data:{ tex...
2024-01-10
【React】webpack require 路径 可以用变量吗？
问题：webpack require 路径 可以用变量吗？需求：由于需要动态的请求一些 JS脚本，路径是 一个变量，在 react+webpack 开发中，有办法 有 require 去加载一个 动态路径的 脚本？var popWinPath = '../../js/window.js';var Win = require(popWinPath)console.log('Win', Win, popWinPath)已经找到解决的办法// 文件变量var popWinPath = 'js/...
2024-01-10
vue+webpack模拟后台数据的示例代码
一、在webpack-dev-conf.js文件中：1、在const portfinder = require(‘portfinder')后添加如下内容const express = require('express')const app = express() //请求servervar appData = require('../mock/goods.json') //加载本地数据文件var apiRoutes = express.Router()app.use(apiRoutes) //通过路由请求数...
2024-01-10
Vue2+webpack+node 配置+入门+详解
1.vue2.0 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层采用单文件组件复杂大型单页应用程序（SPA）响应式的数据绑定，与组件化的开发HTML中的DOM与其他的部分独立开来划分出一个层次，这个层次就叫做视图层 2.WebpackWebpack是一个前端打包和构建...
2024-01-10
vue、gulp、webpack踩过的坑和笔记
1.监听流错误 stream-combiner22.热更新Browsersync与element冲突，换成gulp-connect3.gulp-uglify压缩js不能压缩es64.使用vue-cli 运行npm run build --report 可以输出构建情况 浏览器自动访问 http://127.0.0.1:88885.在使用vue-cli创建项目时，git中use arrow keys选项在windows中 keys为序号，比如输入1然后按enter会选择第一个，依次类...
2024-01-10webpack-mvc 传统多页面组件化开发详解
最近有一个项目，还是使用的传统 MVC 模式开发，完全基于jQuery，使用了基于java模板引擎velocity，页面中嵌入了大量java语法，使得前后端分离不彻底，工程打包上线苦不堪言，为实现后端为服务化，前端也得彻底从后端中分离出来。方案: webpack4 + ejswebpack打包所有的 资源打包所以的 脚本打包所以...
2024-01-10
如何用webpack搭建vue项目？本文案例详解
前言：都2020年了，感觉是时候该学一波webpack了，趁着最近有时间，就学了一下，等把官网上的webpack结构和模块大概看了一遍之后，就感觉可以开始搭个项目实战一下了，从0开始，一步步记录下来使用版本： webpack4.x1.包含插件和loader* html: html-webpack-plugin clean-webpack-plugin* css: style-loader css-l...
2024-01-10
用vue/cli生成的vue2.5.2配置不了px2rem webpack
用vue/cli生成的vue2.5.2配置了webpack.dev.conf.js里的px2rem-loader没效果使用npm run dev是没报错，但是vue里面的<style scoped>没有把写的px转换为rempackage.json里的配置是{ "name": "vue-study", "version": "1.0.0", "description": "A Vue....
2024-03-11
